<template>
  <page title="用户管理">
    <el-row :gutter="20" class="header-title">
      <el-col :span="12">
        <el-button type="primary" @click="registerUser">新增用户</el-button>
      </el-col>
      <el-col :span="2">
        <span class="center">部门</span>
      </el-col>
      <el-col :span="4">
        <el-select v-model="partType" placeholder="全部">
          <el-option
              v-for="item in part"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <span class="center">用户名</span>
      </el-col>
      <el-col :span="4">
        <el-input prefix-icon="el-icon-search" v-model="searchKey"></el-input>
      </el-col>
    </el-row>
    <el-table :data="table" header-cell-class-name="table-header" row-key="id">
      <el-table-column
          prop="name"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="part.name"
          label="部门">
      </el-table-column>
      <el-table-column
          prop="character.name"
          label="角色">
      </el-table-column>
      <el-table-column
          prop="enable"
          label="状态">
        <template #default="scope">
          <span :style="{color : statusMap[scope.row.enable].color }">{{statusMap[scope.row.enable].msg}}</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="scope">
          <el-button
              type="text"
              @click="handleLook(scope.$index, scope.row)">查看</el-button>
          <el-button
              v-if="scope.row.enable === true"
              type="text"
              @click="handleDisable(scope.$index, scope.row)">禁用</el-button>
          <el-button
              v-if="scope.row.enable === false"
              type="text"
              @click="handleEnable(scope.$index, scope.row)">启用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="end" class="footer-pager">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[8, 10, 12, 14, 16]"
          :page-size="currentSize"
          layout="sizes, prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </el-row>
  </page>
<!--新增用户的对话框-->
  <el-dialog
      title="新增用户"
      width="30%"
      v-model="dialogVisible1">
    <el-form label-position="top">
      <el-space direction="horizontal" size="large" wrap>
        <el-form-item
        label="账户名">
          <el-input v-model="userForm.username"></el-input>
        </el-form-item>
        <el-form-item
            label="密码">
          <el-input v-model="userForm.password"></el-input>
        </el-form-item>
        <el-form-item
            label="姓名">
          <el-input v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item
            label="部门">
          <el-select v-model="userForm.part.id">
            <el-option
                v-for="item in part.slice(1,part.length)"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="角色">
          <el-select v-model="userForm.character.id">
            <el-option
                v-for="item in characters"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-space>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="checkSubmit().then(()=>this.findAllUser())">保 存</el-button>
      <el-button @click="dialogVisible1 = false">取 消</el-button>
    </template>
  </el-dialog>
<!-- 显示用户信息的对话框 -->
  <el-dialog
      title="用户信息"
      width="30%"
      v-model="dialogVisible2">
    <el-descriptions :column = 2>
      <el-descriptions-item label="账户名">{{userForm.username}}</el-descriptions-item>
      <el-descriptions-item label="密码">暂不提供</el-descriptions-item>
      <el-descriptions-item label="姓名">{{userForm.name}}</el-descriptions-item>
      <el-descriptions-item label="部门">{{userForm.part.name}}</el-descriptions-item>
      <el-descriptions-item label="角色">{{userForm.character.name}}</el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible2 = false">返 回</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Page from "@/components/Page";
import axios from "axios";
export default {
  name: "UserManage",
  components: {Page},
  data(){
    return{
      tableData:[],
      statusMap:{
        true:{
          color:'',
          msg:'正常'
        },
        false:{
          color:'rgb(245, 108, 108)',
          msg:'已禁用'
        }
      },
      part:[],
      currentPage: 1,
      currentSize: 8,
      partType: '',
      searchKey:'',

      dialogVisible1:false,
      dialogVisible2:false,
      userForm:{},
      characters:[{
        id:1,
        name: "审批人"
      }],
    }
  },
  methods:{
    handleLook(index,row){
      this.dialogVisible2 = true;
      console.log(index);
      row;
      this.userForm = row;
    },
    handleDisable(index,row){
      console.log(index);
      return axios.post(this.$host+"/user/status",null,{
        params:{
          userId:row.id,
          enable:false
        }
      }).then(()=>{
        this.findAllUser();
      })
    },
    handleEnable(index,row){
      console.log(index);
      return axios.post(this.$host+"/user/status",null,{
        params:{
          userId:row.id,
          enable:true
        }
      }).then(()=>{
        this.findAllUser();
      })
    },
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    checkSubmit(){
      this.dialogVisible1 = false;
      return axios.post(this.$host+'/user',this.userForm).then((response)=>{
        if(response.data.code === 0){
          this.$message.success("注册成功");
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllUser(){
      return axios.get(this.$host+"/user").then(response=>{
        if(response.data.code === 0){
          this.tableData = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllPart(){
      return axios.get(this.$host+"/part").then(response =>{
        if(response.data.code === 0){
          this.part = response.data.data;
          this.part.unshift({
            id:'0',
            name:'全部'
          });
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllCharacter(){
      return  axios.get(this.$host+"/character").then(response =>{
        if(response.data.code === 0){
          this.characters = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    registerUser(){
      this.userForm = {
        username:'',
        password:'',
        name:'',
        part:{
          id:''
        },
        character:{
          id:''
        }
      }
      this.dialogVisible1 = true;
    }
  },
  created() {
    Promise.all([this.findAllUser(),this.findAllPart(),this.findAllCharacter()])
  },
  computed:{
    table(){
      return this.tableData.slice((this.currentPage-1)*this.currentSize,
          Math.min(this.currentPage*this.currentSize,this.tableData.length)).filter((value)=>{
        return this.partType === ''||this.partType ==='0'|| value.part.id === this.partType;
      }).filter((value => {
        return this.searchKey === ''|| value.name.indexOf(this.searchKey) !== -1;
      }));
    }
  }
}
</script>

<style scoped>

</style>